<template>
  <view>
	<view class="search" style="backgroundImage:url(/static/images/gugou/indexCover.jpg)">
		<view class="search-box">
		    <input type="text" @click="goToSearch" class="searchInput" />
			<view class="searchIcon">
				<image src="/static/icons/search.png" mode="aspectFill" alt=""></image>
			</view>
		</view>  
	</view>
	<view class="notice">
		<view class="function">
			
			<view v-for="(item,index) in goodsSwitch" :key="index" @click="switchGoods(item.type)" >
				<view class="item" :class="currentIndex==index?'aaa':''">
					<image :src="item.icon" mode="aspectFill" class="icon" />
					<view class="f_title">{{item.text}}</view>
				</view>
			</view>
		</view>  
	</view>
	<!-- 谷子显示模块 -->
	<view class="recommend">
			<view class="goods">
				<view v-for="(item,index) in goods" :key="index" @click="goGoodsDetail(item.id)">
					<goodsCard>
						<template v-slot:headImg>
								<image :src="item.groupAvatar" mode="aspectFill" class="headImg"></image>
						</template>
						<template v-slot:groupName>
							{{item.groupName}}
						</template>
						<template v-slot:coverImg>
							<image :src="item.cover" mode="widthFix" class="coverImg"></image>
						</template>
						<template v-slot:goodsName>
							{{item.name}}
						</template>
						<template v-slot:tag>
							<view v-for="(tag, index2) in item.tags" :key="index2" class="tag">
								<view>{{ tag }}</view>
							</view>
						</template>
						<template v-slot:price>
							<text style="font-size: 40rpx;color: red;">{{item.averagePrice}}</text>
						</template>
					</goodsCard>
				</view>
			</view>	
	</view>
	<image src="../../static/images/gugou/bugubaikeNewNew.png" mode="widthFix" class="baike" @click="switchPage"/>
  </view>
</template>

<script>
import goodsCard from '../../components/goodsCard/goodsCard.vue'
import {getGoodsList} from '@/api/home.js'
export default {
  components:{
	  goodsCard
  },
  data() {
    return {
		goods: [],
		currentIndex:0,
		goodsSwitch:[
		{
			icon:'../../static/icons/jisu.png',
			text:'正在开谷',
			type:3
		},{
			icon:'../../static/icons/tuijian.png',
			text:'为你推荐',
			type:0,
		},{
			icon:'../../static/icons/shoucang.png',
			text:'我的关注',
			type:1,
		},{
			icon:'../../static/icons/huo.png',
			text:'Hot100',
			type:2,
		}]
	}
  },
  // 下拉刷新方法
  async onPullDownRefresh() {
  	await this.switchGoods(this.currentIndex)
  	uni.stopPullDownRefresh()
  },
  // async onReachBottom() {
  // 	this.switchGoods(0)
  // 	console.log("onReachBottom");
  // },
  onLoad() {
  },
  onShow() {
	console.log(111,'推荐')
	this.switchGoods(this.currentIndex)
  },
  
  methods: {
	  switchGoods(type){
		this.currentIndex=type;
		getGoodsList(type).then(res=>{
			if(res.data.code==200){
				  this.goods=res.data.data;  
			}
		  })
	  },
	  goToSearch(){
		   uni.navigateTo({
			  url: '/pages/indexSearch/indexSearch' // 跳转到搜索页面
			});
	  },
	  switchPage(){
		  uni.navigateTo({
			  url: '/pages/index/bugubaike' // 跳转到百科页面
		  });
	  },
	  goGoodsDetail(id){
		  uni.navigateTo({
		  	url:`/pages/goodsDetails/goodsDetails?goodsId=${id}`
		  })
	  },
  },
}
</script>

<style lang="scss">
/* search模块 */
.search{
	width: 100%;
	height: 400rpx;
	background-size: cover;
	overflow: hidden;
}
.search-box{
	position: relative;
	width: 92%;
	height: 70rpx;
	margin: 36rpx auto;
}

.searchInput {
	position: absolute;
	width: 94%;
    height: 60rpx;
    padding: 10rpx 20rpx;
    line-height: 60rpx;
    /* border: 1px solid #8DC7DF; */
	border: 1rpx solid #d2d4d8;
    border-radius: 40rpx;
	background-color: rgba(255, 255, 255, .3);
}
.searchIcon{
	position: absolute;
	top: 10rpx;
	right: 30rpx;
	width: 60rpx;
	height: 60rpx;
}
.searchIcon image{
	width: 100%;
	height: 100%;
}

/* notice模块 */
.notice{
	display: flex;
	justify-content: center;
	width: 100vm;
	// height: 200rpx;
}
.notice .function {
	display: flex;
	width:100%;
	justify-content: space-around;
	align-items: center;
}
.notice .item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 20rpx;
	&.aaa {
		background-color: #f6feff;
		border-bottom: 10rpx solid #89C3DB;
	}
}
.notice .icon{
	width: 50rpx;
	height: 50rpx; 
	margin-bottom:20rpx;
}
.notice .f_title {
	width: 150rpx;
	font-size: 30rpx;
	line-height: 30rpx;
	color: #333;
	text-align: center;
}

.notice .intro{
	flex: 2;
	height: 200rpx;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
}
.intro .introImg{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 120rpx;
	height: 120rpx;
}
.intro .introImg image{
	width: 70%;
	height: 70%;
}
.introTitle{
	font-size: 32rpx;
	margin-top: 6rpx;
}
/* recommend */
.recommend{
	padding:40rpx;
}
.recommend .line{
	display: flex;
	align-items: center;
	margin: 0 auto;
	height: 80rpx;
	line-height: 80rpx;
	font-size: 26rpx;
	color: #89C3DB;
}
.recommend .line::before,.recommend .line::after{
	content: '';
	display: inline-block;
	width: 250rpx;
	height: 1rpx;
	background-color: #89C3DB;
	margin: 0 15rpx;
}
.goods{
	column-count: 2;
	column-gap: 20rpx;
	
}
/* ------------------------ */
/* .uni-list {
  display: flex;
  flex-wrap: wrap;
  margin: -10rpx;
}
.uni-list-item {
  width: 50%;
  box-sizing: border-box;
  padding: 10rpx;
} */
/* ------------------------ */
.groupInfo .headImg{
	width: 50rpx;
	height: 50rpx;
	border-radius: 50%;
	margin-right: 20rpx;
}
.goodsInfo .coverImg {
	width: 100%;
}
.tags .tag {
    display: inline-block;
    height: 40rpx;
    padding: 0 14rpx;
    margin: 10rpx 10rpx 10rpx 0;
    line-height: 40rpx;
	color: #347CD4;
    font-size: 20rpx;
    border-radius: 20rpx;
	background-color: #E3F1F7;
}
.baike {
	position: fixed;
	width:100rpx;
	left: 10rpx;
	top:200rpx;
	
}
</style>
